<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2024/4/18
  Time: 23:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>系统管理</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div class="main-wrapper">
    <div class="sidebar-wrapper">
        <%@include file="components/sidebar.html" %>
    </div>
    <div class="main-container">
        <%@include file="components/navbar.html" %>
        <div class="app-container" id="main-app">
            <div class="appoint-mana-container" v-if="tab == 0">

                <div class="sub-route-title-box">
                    <span class="divi-line"></span>
                    <span class="title">公告列表</span>
                </div>
                <div class="btn-box" style="margin-bottom: 0.8vw;">
                    <el-button type="primary" plain size="medium" @click="noticeDialog = true">新增公告</el-button>
                </div>
                <div class="table-container">
                    <el-table
                            :data="noticeData"
                            style="width: 95%"
                            :header-cell-style="{
                    'background-color': '#f8f8f9',
                    'color': '#000',
                    'font-weight': '600',
                    'text-align': 'center'
                }"
                            :cell-style="{ 'text-align': 'center' }"
                    >
                        <el-table-column
                                type="index"
                                label="#"
                                width="50">
                        </el-table-column>
                        <el-table-column label="管理员" width="120">
                            <template slot-scope="scope">
                                <span>{{ scope.row.adminName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="content"
                                label="内容">
                        </el-table-column>
                        <el-table-column label="日期">
                            <template slot-scope="scope">
                                <span>{{ getTime(scope.row.datetime) }}</span>
                            </template>
                        </el-table-column>
                    </el-table>

                    <el-dialog title="新增公告" :visible.sync="noticeDialog">
                        <el-form :model="noticeForm" :rules="noticeRules" ref="noticeForm">
                            <el-form-item label="公告内容" style="margin-left: 1.5vw;" prop="content">
                                <el-input v-model="noticeForm.content" autocomplete="off" style="width: 85%;"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="noiceDialog = false">取 消</el-button>
                            <el-button type="primary" @click="submitNoticeForm()">确 定</el-button>
                        </div>
                    </el-dialog>

                </div>

            </div>

            <div class="appoint-mana-container" v-if="tab == 1">
                <div class="sub-route-title-box">
                    <span class="divi-line"></span>
                    <span class="title">留言列表</span>
                </div>
                <div style="box-sizing: border-box; width: 98%;">
                    <el-table
                            :data="commentData"
                            style="width: 100%"
                            :header-cell-style="{
                    'background-color': '#f8f8f9',
                    'color': '#000',
                    'font-weight': '600',
                    'text-align': 'center'
                }"
                            :cell-style="{ 'text-align': 'center' }">
                        <el-table-column
                                type="index"
                                label="#"
                                width="50">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="姓名"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="message"
                                label="内容">
                        </el-table-column>
                        <el-table-column
                                prop="createdAt"
                                label="日期"
                                width="200">
                        </el-table-column>
                        <el-table-column
                                label="操作">
                            <template slot-scope="scope">
                                <el-button type="danger" plain @click="deleteMessageById(scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <div class="pagination-box">
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="total"
                            :page-size="10"
                            :current-page="page"
                            @current-change="handleCurrentChange">
                    </el-pagination>
                </div>


            </div>


            <div class="appoint-mana-container" v-if="tab == 2">
                <div class="sub-route-title-box">
                    <span class="divi-line"></span>
                    <span class="title">挂号类型</span>
                </div>
                <div class="btn-box" style="margin-bottom: 0.8vw;">
                    <el-button type="primary" plain size="medium" @click="typeDialogFlag = true">新增类型</el-button>
                </div>
                <div class="table-container">
                    <el-table
                            :data="typeOptions"
                            style="width: 95%"
                            :header-cell-style="{
                    'background-color': '#f8f8f9',
                    'color': '#000',
                    'font-weight': '600',
                    'text-align': 'center'
                }"
                            :cell-style="{ 'text-align': 'center' }"
                    >
                        <el-table-column
                                type="index"
                                label="编号" width="200">
                        </el-table-column>
                        <el-table-column label="名称">
                            <template slot-scope="scope">
                                <span>{{ scope.row.value }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="操作">
                            <template slot-scope="scope">
                                <el-button type="danger" plain>删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                </div>

                <el-dialog title="挂号类型列表" :visible.sync="typeDialogFlag">
                    <div class="dialog-body">
                        <el-form ref="typeForm" :model="typeFormData" :rules="typeRules" size="medium" label-width="100px">
                            <el-col :span="24">
                                <el-row :gutter="15">
                                    <el-col :span="12">
                                        <el-form-item label="挂号类型" prop="name">
                                            <el-input v-model="typeFormData.name" placeholder="请输入挂号类型" :style="{width: '100%'}">
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="科室名称" prop="department">
                                            <el-input v-model="typeFormData.department" placeholder="请输入科室名称" :style="{width: '100%'}">
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-form>
                    </div>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="plain" @click="typeDialogFlag = false">关闭</el-button>
                        <el-button type="primary" @click="submitTypeForm()">确 定</el-button>
                    </div>
                </el-dialog>
            </div>

            <div class="appoint-mana-container" v-if="tab == 3">
                <div class="sub-route-title-box">
                    <span class="divi-line"></span>
                    <span class="title">科室列表</span>
                </div>
                <div class="btn-box" style="margin-bottom: 0.8vw;">
                    <el-select v-model="typeSelected" placeholder="请选择科室" @change="selectNewType">
                        <el-option
                                v-for="item in typeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                >
                        </el-option>
                    </el-select>
                    <el-button type="primary" plain size="medium" @click="clinicsDialogFlag = true" style="margin-left: 1vw;">新增科室</el-button>
                </div>
                <div class="table-container">
                    <el-table
                            :data="clinicsOptions"
                            style="width: 95%"
                            :header-cell-style="{
                    'background-color': '#f8f8f9',
                    'color': '#000',
                    'font-weight': '600',
                    'text-align': 'center'
                }"
                            :cell-style="{ 'text-align': 'center' }"
                    >
                        <el-table-column
                                type="index"
                                label="编号" width="200">
                        </el-table-column>
                        <el-table-column label="名称">
                            <template slot-scope="scope">
                                <span>{{ scope.row.value }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="操作">
                            <template slot-scope="scope">
                                <el-button type="danger" plain>删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                </div>

                <el-dialog title="新增科室" :visible.sync="clinicsDialogFlag">
                    <div class="dialog-body">
                        <el-form ref="clinicsForm" :model="clinicsFormData" :rules="clinicsRules" size="medium" label-width="100px">
                            <el-col :span="24">
                                <el-row :gutter="15">
                                    <el-col :span="20">
                                        <el-form-item label="科室名称" prop="name">
                                            <el-input v-model="clinicsFormData.name" placeholder="请输入科室名称" :style="{width: '100%'}">
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-form>
                    </div>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="plain" @click="clinicsDialogFlag = false">关闭</el-button>
                        <el-button type="primary" @click="submitClinicsForm()">确 定</el-button>
                    </div>
                </el-dialog>
            </div>

            <el-dialog title="预约详情" :visible.sync="detailDialogFlag">
                <div class="dialog-body">
                    <div class="message-container">
                        <div class="message-item">
                            <span class="msg-title">挂号编号</span>
                            <span class="msg-content">{{getNo(appoinDetail.id)}}</span>
                        </div>
                        <div class="message-item">
                            <span class="msg-title">患者姓名</span>
                            <span class="msg-content">{{appoinDetail.name}}</span>
                        </div>
                        <div class="message-item">
                            <span class="msg-title">挂号时间</span>
                            <span class="msg-content">{{getTime(appoinDetail.datetime)}}</span>
                        </div>
                        <div class="message-item">
                            <span class="msg-title">挂号进度</span>
                            <span class="msg-content">{{getStatus(appoinDetail.status)}}</span>
                        </div>
                    </div>
                    <div style="height: 200px; margin-top: 1.5vw;">
                        <el-steps direction="vertical" :active="getStatusNum(appoinDetail.status)==1||getStatusNum(appoinDetail.status)==3?1:2" space="90px">
                            <el-step title="挂号已发起，排队等待中"></el-step>
                            <el-step title="医生正在问诊"></el-step>
                            <el-step title="问诊已结束"></el-step>
                        </el-steps>
                    </div>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="detailDialogFlag = false">关闭</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</div>
<!-- import Vue before Element -->
<script src="assets/js/vue.js"></script>
<!-- import JavaScript -->
<script src="assets/js/axios.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#main-app',
        data: function () {
            return {
                noticeDialog: false,
                detailDialogFlag: false,
                commentDialogFlag: false,
                typeDialogFlag: false,
                clinicsDialogFlag: false,
                tab: 0,
                total: 10,
                page: 1,
                statusMap: {
                    'pending': '排队中',
                    'confirmed': '已完成',
                    'cancelled': '已取消'
                },
                statusNumMap: {
                    'pending': 1,
                    'confirmed': 2,
                    'cancelled': 3
                },
                noticeForm: {
                    content: '',
                },
                noticeRules: {
                    content: [
                        {required: true, message: '请输入公告内容', trigger: 'blur'},
                        {min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur'}
                    ],
                },
                formData: {
                    result: ''
                },
                typeFormData: {
                    name: '',
                    department: '',
                },
                typeRules: {
                    name: [{
                        required: true,
                    }],
                    department: [{
                        required: true,
                    }],
                },
                typeSelected: '',
                clinicsFormData: {
                    name: '',
                },
                clinicsRules: {
                    name: [{
                        required: true,
                    }],
                },
                rules: {
                    result: [],
                },
                typeOptions: [],
                clinicsOptions: [],
                doctorOptions: [],
                total: 1,
                tableData: [],
                commentData: [],
                noticeData: [],
                appoinDetail: {
                    "datetime": 1714027955000,
                    "doctorsId": 1,
                    "id": 9,
                    "department": "肛肠科",
                    "title": "石大夫",
                    "status": "pending"
                },
                timeFormData: {
                    date: null
                },
                doctorId: -1

            }
        },
        methods: {
            routerWatcher() {
                setInterval(() => {
                    let query = window.location.search;
                    // console.log(query)
                    if (query != '') {
                        this.tab = Number(query.split('tab=')[1]);
                    }
                }, 100)
            },
            getTime(datetime) {
                let date = new Date(datetime);
                return (date.toLocaleDateString() + ' ' + date.toLocaleTimeString())
            },
            getStatus(str) {
                return this.statusMap[str]
            },
            getStatusNum(str) {
                return this.statusNumMap[str]
            },
            getNo(id) {
                let formattedId = id.toString().padStart(8, '0');
                return formattedId;
            },
            getNotices() {
                axios.post('NoticeServlet')
                    .then(response => {
                        console.log(response);
                        if(response.data.status==200) {
                            this.noticeData = response.data.data
                            // window.location = "login.html"
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            submitNoticeForm() {
                this.$refs['noticeForm'].validate(valid => {
                    if (!valid) return
                    let data = {
                        adminId: 1,
                        adminName: 'admin',
                        content: this.noticeForm.content
                    }
                    axios.put('NoticeServlet', data)
                        .then(response => {
                            console.log(response);
                            if (response.data.status == 200) {
                                this.noticeDialog = false
                                this.noticeForm.content = ''
                                this.getNotices();
                                ELEMENT.Message({
                                    message: '提交成功！',
                                    type: 'success'
                                });

                                // window.location = "login.html"
                            } else {
                                ELEMENT.Message.error('提交失败');
                            }
                        })
                        .catch(error => {
                            console.log(error);
                            ELEMENT.Message.error('未知错误，请联系管理员');
                        });
                })
            },
            handleCurrentChange(page) {
                this.page = page;
                this.getMessages(this.page)
            },
            getMessages(page) {
                axios.post('MessageServlet', {
                    pageNumber: page
                })
                    .then(response => {
                        console.log('MessageServlet', response);
                        if (response.data.status == 200) {
                            this.commentData = response.data.data
                            this.commentData.forEach((value, index) => {
                                let date = new Date(value.createdAt)
                                value.createdAt = date.toLocaleDateString() + ' ' + date.toLocaleTimeString()
                            }) //将时间戳转化成字符串
                            // window.location = "login.html"
                        } else {
                            // ELEMENT.Message.error('修改失败');
                        }
                    })
                    .catch(error => {
                        console.log(error);
                        ELEMENT.Message.error('未知错误，请联系管理员');
                    });
            },
            deleteMessageById(id) {
                axios.delete('MessageServlet?id='+id)
                    .then(response => {
                        console.log(response);
                        if (response.data.status == 200) {

                            this.getMessages(1);
                            ELEMENT.Message({
                                message: '删除成功！',
                                type: 'success'
                            });

                            // window.location = "login.html"
                        } else {
                            ELEMENT.Message.error('删除失败');
                        }
                    })
                    .catch(error => {
                        console.log(error);
                        ELEMENT.Message.error('未知错误，请联系管理员');
                    });
            },
            getAllTypes() {
                axios.get('ClinicsServlet')
                    .then(response => {
                        console.log(response);
                        if(response.data.status==200) {
                            let typeObj = []
                            for(let item of response.data.data) {
                                let tmp = {
                                    label: item,
                                    value: item
                                }
                                typeObj.push(tmp);
                            }
                            this.typeOptions = typeObj;
                            // window.location = "login.html"
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            submitTypeForm() {
                this.$refs['typeForm'].validate(valid => {
                    if (!valid) return
                    let data = {
                        deClass: this.typeFormData.name,
                        department:  this.typeFormData.department,
                    }
                    axios.put('ClinicsServlet', data)
                        .then(response => {
                            console.log(response);
                            // if(response.data.status==200) {
                                ELEMENT.Message({
                                    message: '提交成功！',
                                    type: 'success'
                                });
                                this.getAllTypes();
                                this.typeDialogFlag = false
                                this.typeFormData.type = ''
                                this.typeFormData.clinics = ''
                                // window.location = "login.html"
                            // }
                            // else {
                            //     ELEMENT.Message.error('修改失败');
                            // }
                        })
                        .catch(error => {
                            console.log(error);
                            ELEMENT.Message.error('未知错误，请联系管理员');
                        });
                })
            },
            getDepartment(depa) {
                let data = {
                    department: depa
                }
                axios.post('ClinicsServlet',data)
                    .then(response => {
                        console.log(response);
                        if(response.data.status==200) {
                            let clinicsObj = []
                            for(let item of response.data.data) {
                                let tmp = {
                                    label: item,
                                    value: item
                                }
                                clinicsObj.push(tmp);
                            }
                            this.clinicsOptions = clinicsObj;
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            selectNewType(type) {
                this.getDepartment(type)
            },
            submitClinicsForm() {
                this.$refs['clinicsForm'].validate(valid => {
                    if (!valid) return
                    let data = {
                        deClass: this.typeSelected,
                        department:  this.clinicsFormData.name,
                    }
                    axios.put('ClinicsServlet', data)
                        .then(response => {
                            console.log(response);
                            // if(response.data.status==200) {
                            ELEMENT.Message({
                                message: '提交成功！',
                                type: 'success'
                            });
                            this.getDepartment(this.typeSelected);
                            this.clinicsDialogFlag = false
                            this.clinicsFormData.name = ''
                            // window.location = "login.html"
                            // }
                            // else {
                            //     ELEMENT.Message.error('修改失败');
                            // }
                        })
                        .catch(error => {
                            console.log(error);
                            ELEMENT.Message.error('未知错误，请联系管理员');
                        });
                })
            },
            getAppointments() {
                let params = {
                    doctorsId: this.doctorId
                }
                axios.get('DoctorsAppointmentsServlet', {params})
                    .then(response => {
                        console.log(response);
                        if(response.data.status==200) {
                            this.tableData = response.data.data
                            // window.location = "login.html"
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            getAppointmentsFinished() {

                axios.put('DoctorsAppointmentsServlet?doctorsId='+this.doctorId)
                    .then(response => {
                        console.log(response);
                        if(response.data.status==200) {
                            this.tableData = response.data.data
                            // window.location = "login.html"
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            appoinDetailClick(item) {
                this.detailDialogFlag = true;
                this.appoinDetail = item
            },
            appoinFormInit() {
                let u = JSON.parse(localStorage.getItem('user'))
                this.formData.name = u.name;
                this.formData.mobile = u.phoneNumber;
                axios.get('ClinicsServlet')
                    .then(response => {
                        console.log(response);
                        if(response.data.status==200) {
                            let typeObj = []
                            for(let item of response.data.data) {
                                let tmp = {
                                    label: item,
                                    value: item
                                }
                                typeObj.push(tmp);
                            }
                            this.typeOptions = typeObj;
                            // window.location = "login.html"
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            getDoctorId(uid) {
                axios.post('DoctorsServlet')
                    .then(response => {
                        console.log(response);
                        if(response.data.status==200) {
                            for(let item of response.data.data) {
                                console.log(item,item.userId == uid)
                                if(item.userId == uid) {
                                    this.doctorId = item.id
                                    console.log(this.doctorId)
                                    break;
                                }
                            }
                            this.getAppointments();
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            timeValidateFunc() {
                return [
                    {
                        validator: (rule, value, callback) => {
                            const start = new Date(this.formData.date).getTime();
                            if (!value) {
                                callback(new Error('请选择时间'));
                            } else if (start < Date.now()) {
                                callback(new Error('发布时间要大于当前时间!'));
                            } else {
                                callback();
                            }
                        },
                    },
                ];
            },
            timeValid(time) {
                let now = Date.now()
                let seletced = new Date(time)
                if(now >= seletced) {
                    ELEMENT.Message.error('预约时间不得早于当前时间');
                    this.formData.date = null
                    this.timeFormData.date = null
                }
            },
            cancelApplication() {
                console.log(this.appoinDetail)
                let params = {
                    id: this.appoinDetail.id
                }
                console.log(params,this.appoinDetail.id)
                axios.delete('AppointmentsServlet', {params})
                    .then(response => {
                        console.log(response);
                        if(response.data.status==200) {
                            this.commentDialogFlag = false
                            this.getAppointments();
                            ELEMENT.Message({
                                message: '成功取消预约',
                                type: 'success'
                            });

                            // window.location = "login.html"
                        }
                        else {
                            ELEMENT.Message.error('取消失败');
                        }
                    })
                    .catch(error => {
                        console.log(error);
                        ELEMENT.Message.error('未知错误，请联系管理员');
                    });
            },
            confirmApplication() {
                let data = {
                    id: this.appoinDetail.id
                }
                axios.post('DoctorsAppointmentsServlet', data)
                    .then(response => {
                        console.log(response);
                        if(response.data.status==200) {
                            this.commentDialogFlag = false
                            this.getAppointments();
                            ELEMENT.Message({
                                message: '提交成功',
                                type: 'success'
                            });

                            // window.location = "login.html"
                        }
                        else {
                            ELEMENT.Message.error('提交失败');
                        }
                    })
                    .catch(error => {
                        console.log(error);
                        ELEMENT.Message.error('未知错误，请联系管理员');
                    });
            },
            appoinModifyClick(item) {
                this.commentDialogFlag = true;
                this.formData.result = ''
                this.appoinDetail = item
                console.log(this.appoinDetail)
            },

        },
        created() {
            this.routerWatcher();
            this.getNotices();
            axios.get('MessageServlet')
                .then(response => {
                    console.log('MessageServlet', response);
                    if (response.data.status == 200) {
                        this.total = response.data.data * 10
                        // window.location = "login.html"
                    } else {
                        // ELEMENT.Message.error('修改失败');
                    }
                })
                .catch(error => {
                    console.log(error);
                    ELEMENT.Message.error('未知错误，请联系管理员');
                });

            this.appoinFormInit();
            this.getDoctorId(JSON.parse(localStorage.getItem('user')).id)
            // let id = JSON.parse(localStorage.getItem('user')).id
            // this.getAppointments(id);
        },
        watch:{
            tab(newValue, oldValue) {
                if(newValue == 1) {
                    console.log('tab changed')
                    // let id = JSON.parse(localStorage.getItem('user')).id
                    this.getMessages(1)
                }
                else if(newValue == 2) {
                    this.getAllTypes()
                }
            }
        }
    })
</script>
<style>
    @import "assets/css/base.css";

    .main-wrapper {
        width: 100%;
        height: 100vh;
        display: flex;
    }

    .main-wrapper .sidebar-wrapper {
        width: 15vw;
        height: 100vh;
        position: fixed;
        left: 0;
    }

    .main-wrapper .main-container {
        margin-left: 15vw;
        width: 85vw;
        height: 100vh;
    }

    .main-wrapper .main-container .online-appoint-container {
        width: 100%;
        padding: 0.5vw 2vw 1vw;
        box-sizing: border-box;
    }

    .sub-route-title-box {
        display: flex;
        justify-content: start;
        padding: 1vw 0;
    }
    .sub-route-title-box .divi-line {
        display: inline-block;
        width: 2px;
        height: 1.2vw;
        background-color: #409EFF;
    }
    .sub-route-title-box .title {
        padding-left: 1vw;
        margin-left: -2px;
        color: #808080;
    }

    .main-wrapper .main-container .online-appoint-container  .card-container {
        /*width: 23%;*/
        display: flex;
        flex-direction: column;
        padding: 0.5vw 0 2vw;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        border: 1px solid #e6ebf5;
        border-radius: 4px;
    }

    .card-container .card-title {
        padding: 0.5vw 1vw;
        border-bottom: 1px solid #e6ebf5;
    }
    .card-container .card-body {
        padding: 1.5vw 1.5vw 0.5vw;
    }
    .card-container .card-body .headimg-box {
        display: flex;
        height: 8vw;
        justify-content: center;
        padding: 0.5vw;

    }
    .card-container .card-body .headimg-box img {
        width: 100%;
        border-radius: 50%;
        overflow: hidden;
    }
    .card-container .card-body .info-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        font-size: 0.92vw;
        border-top: 1px solid #e7eaec;
        margin-top: 1.2vw;
    }
    .card-container .card-body .info-box .info-item {
        display: flex;
        justify-content: space-between;
        padding: 0.8vw 0;
        border-bottom: 1px solid #e7eaec;
    }


    .main-wrapper .main-container .appoint-mana-container {
        width: 100%;
        padding: 0.5vw 2vw 1vw;
        box-sizing: border-box;
    }
    .main-container .pagination-box {
        display: flex;
        justify-content: center;
        padding: 1vw;
    }
    .dialog-body {
        padding: 0.5vw 2.5vw;
        color: #808080;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .dialog-body .message-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .dialog-body .message-item {
        display: flex;
        justify-content: start;
        padding: 0 0 2vw;
    }
    .message-item .msg-title {
        margin-right: 2vw;
    }
</style>
</body>
</html>
